<script>
import Header from "@/components/Header.vue";
import List from "@/components/List.vue";
import Footer from "@/components/Footer.vue";

export default {
  name: "App",
  components: {Footer, List, Header},
  data() {
    return {
      todos: JSON.parse(localStorage.getItem("todos")) || []
    };
  },
  methods: {
    getTodoObj(todo) {
      this.todos.unshift(todo)
    },
    changeDone(id, done) {
      this.todos.forEach((item) => {
        if (item.id === id) {
          item.done = done
        }
      })
    },
    removeTodoObj(id) {
      this.todos = this.todos.filter((item) => {
        return item.id !== id
      })
    },
    isAllChecked(doneTrue) {
      this.todos.forEach((item) => {
        item.done = doneTrue
      })
    },
    clearAllTodo() {
      this.todos = this.todos.filter((item) => {
        return item.done !== true
      })
    }

  },
  watch: {
    todos: {
      deep: true,
      handler(newValue) {
        localStorage.setItem("todos", JSON.stringify(newValue))
      }
    }
  }
};
</script>
<template>
  <div class="app">
    <Header @getTodoObj="getTodoObj"></Header>
    <List :todos="todos" :changeDone="changeDone" :removeTodoObj="removeTodoObj"></List>
    <Footer :todos="todos" :isAllChecked="isAllChecked" :clearAllTodo="clearAllTodo"></Footer>
  </div>
</template>
<style lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

.app {
  width: 600px;
  background-color: #F5F5F5;
  padding: 10px;
  margin: 0 auto;
}
</style>
